$input-height-base: 24px;
$padding-base-vertical: 4px;
$padding-base-horizontal: 12px;
$font-size-base: 16px;
$line-height-base: $input-height-base;
$input-bg: white;
$input-border-radius: 4px;
$input-bg-disabled: #ccc;
$input-border: $spring-border-color;

.input-control {
  display: inline-block;
  //width: 100%;
  height: $input-height-base; // Make inputs at least the height of their button counterpart (base line-height + padding + border)
  padding: $padding-base-vertical $padding-base-horizontal;
  font-size: $font-size-base;
  line-height: $line-height-base;
  color: $spring-color;
  background-color: $input-bg;
  background-image: none; // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214
  border: 1px solid $input-border;
  border-radius: $input-border-radius; // Note: This has no effect on <select>s in some browsers, due to the limited stylability of <select>s in CSS.
  // @include box-shadow(inset 0 1px 1px rgba(0, 0, 0, 0.075));
  @include transition(
    border-color ease-in-out 0.15s,
    box-shadow ease-in-out 0.15s
  );

  // @include form-control-focus;
  // @include placeholder;

  &::-ms-expand {
    background-color: transparent;
    border: 0;
  }

  &[disabled],
  &[readonly],
  fieldset[disabled] & {
    background-color: $input-bg-disabled;
    opacity: 1;
  }

  &[disabled],
  fieldset[disabled] & {
    cursor: not-allowed;
  }

  &:focus {
    border-color: $spring-primary-color;
    outline: none;
    box-shadow: 0 0px 4px 0 rgba($spring-primary-color, 0.5);
  }
}

.dropdown {
  position: relative;
  .dropdown-toggle {
    position: relative;
    display: block;
    border-radius: $input-border-radius;
    height: $input-height-base;
    padding: $padding-base-vertical $padding-base-horizontal;
    font-size: $font-size-base;
    line-height: $line-height-base;
    background-color: $input-bg;
    background-image: none;
    border: 1px solid lighten($input-border, 10);
    svg {
      position: absolute;
      right: 12px;
      top: 10px;
      width: 12px;
      height: 12px;
    }
    &:hover {
      cursor: pointer;
      border: 1px solid $input-border;
    }
  }

  .dropdown-menu {
    position: absolute;
    display: none;
    background-color: $input-bg;
    background-image: none;
    border-radius: $input-border-radius;
    right: 0;
    left: 0;
    top: 40px;
    z-index: 1000;
    box-shadow: 0 0px 4px 0 rgba($spring-color, 0.25);
    .item {
      cursor: pointer;
      padding: ($spring-8points/2) $spring-8points * 2;
      color: $spring-dark-color;
      &:hover {
        background: $spring-gray-color;
        color: $spring-color;
      }
      &.selected,
      &.selected:hover {
        background: $spring-gray-color;
        color: $spring-primary-color;
      }
    }
  }
  &.active {
    .dropdown-menu {
      display: block;
    }
    .dropdown-toggle {
      border-color: $spring-primary-color;
      box-shadow: 0 0px 4px 0 rgba($spring-primary-color, 0.5);
    }
  }
}
